<template>
  <div class="books">
    <div class="tab border-bottom" ref="tab">
      <div class="tab_content" ref="tabWrapper">
        <div class="tab_item" v-for="item in itemList" ref="tabitem">
          {{item.title}}
        </div>
      </div>
    </div>
    <common-footer/>
  </div>
</template>
<script>
  import BScroll from 'better-scroll';
  import commonFooter from '../common/common-footer'
  export default {
    name: 'scrollBar',
    data() {
      return{

        itemList:[
          {
            'title':'关注'
          },
          {
            'title':'推荐'
          },
          {
            'title':'深圳'
          },
          {
            'title':'视频'
          },
          {
            'title':'音乐'
          },
          {
            'title':'热点'
          },
          {
            'title':'新时代'
          },
          {
            'title':'娱乐'
          },
          {
            'title':'头条号'
          },
          {
            'title':'问答'
          },
          {
            'title':'图片'
          },
          {
            'title':'国际'
          }
        ],
      }
    },
    components: {
      commonFooter
    },
    created() {
      this.$nextTick(() => {
        this.InitTabScroll();
      });
    },
    methods:{
      InitTabScroll(){
        let width=0
        for (let  i = 0; i <this.itemList.length; i++) {
          width+=this.$refs.tabitem[0].getBoundingClientRect().width; //getBoundingClientRect() 返回元素的大小及其相对于视口的位置
        }
        this.$refs.tabWrapper.style.width=width+'px'
        this.$nextTick(()=>{
          if (!this.scroll) {
            this.scroll=new BScroll(this.$refs.tab, {
              startX:0,
              click:true,
              scrollX:true,
              scrollY:false,
              eventPassthrough:'vertical'
            });
          }else{
            this.scroll.refresh()
          }
        });
      }
    }
  };
</script>
<style  scoped>
  .tab{
    width: 100vw;
    overflow: hidden;
    padding:5px;
  }
  .tab_content{
    line-height: 2rem;
    display: flex;
    padding: 0;
  }
  .tab_item{
    flex: 0 0 62px;
    width: 40px;
    text-align: center;
  }


</style>
